<html>
<head>
    <title>登录</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <style type="text/css">
        .main {
            margin-top: 10%;
            background-color: white;
            height: 60%;
            border-radius: 20px 20px 20px 20px;
        }
    </style>
</head>
<body style="background-image: url('./bg.jpg'); background-size: 100% 100%;">
<div class="layui-col-xs4 layui-col-xs-offset4 main">
    <div align="center" style="font-size: 30px;margin-top: 8%;"><b>登录</b></div>
    <div class="layui-col-xs10 layui-col-xs-offset1">
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item" style="margin-top: 8%;margin-bottom: 8%;">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" id="username" placeholder="用户名" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 4%;margin-bottom: 4%;">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" id="password" placeholder="密码" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 4%;margin-bottom: 4%;">
                <label class="layui-form-label">是否记住密码</label>
                <div class="layui-input-block">
                    <input type="checkbox" id="rememberMe" value="1" lay-skin="switch" lay-text="是|否">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 12%;margin-bottom: 2%;">
                <div class="layui-col-xs6 layui-col-xs-offset3">
                    <button id="dl" style="width: 100%;" type="button" onclick="sub()"
                            class="layui-btn layui-btn-radius">登录
                    </button>
                </div>
            </div>
            <div align="right" style="margin-top: 8%;">
                <a href="register.html">立即注册</a>
                <a href="javascript:;">忘记密码？</a>
            </div>
        </form>
    </div>
</div>
</body>
<script type="text/javascript">
    layui.use('form', function () {
        var form = layui.form;
    })

    function setCookie(name, value) {
        var exp = new Date();
        exp.setTime(exp.getTime() + 24 * 60 * 60 * 1000);
        document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";path=/";
    }

    function sub() {
        var username = $("#username").val();
        var password = $("#password").val();
        var rememberMe = $("#rememberMe").val();
        if (rememberMe == '1') {
            setCookie('username', username);
            setCookie('password', password);
        }
        login(username, password);
    }

    function login(username, password) {
        layui.use('layer', function () {
            var layer = layui.layer;
            $.getJSON('teacher/login', {
                username: username,
                password: password
            }, function (res) {
                if (res.code == "00000") {
                    window.location.href = "/";
                } else {
                    // alert(res.message);
                    layer.tips('用户名或密码错误', '#dl', {
                        tips: [2, ' #ff4000'],
                        time: 4000
                    });
                }
            })
        })
    }

    function getCookie(cookie_name) {
        var allcookies = document.cookie;
        var cookie_pos = allcookies.indexOf(cookie_name);
        var value = "";
        if (cookie_pos != -1) {
            cookie_pos = cookie_pos + cookie_name.length + 1;
            var cookie_end = allcookies.indexOf(";", cookie_pos);
            if (cookie_end == -1) {
                cookie_end = allcookies.length;
            }
            value = unescape(allcookies.substring(cookie_pos, cookie_end));
        }
        return value;
    }

    window.onload = function () {
        var username = getCookie('username');
        var password = getCookie('password');
        if (username != "" && password != "") {
            login(username, password)
        }
    }
</script>
</html>